<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- <h1>组织架构</h1> -->
      <el-card class="tree-card">
        <!-- 行列布局 -->
        <!-- 公司名称 -->
        <treeTools
          :node-data="companyInfo"
          :is-company="true"
          @showAddDialog="showAddDialog"
        />

        <hr>
        <!--
          分割线一下是部门树形数据
          data:  树形数据
          default-expand-all  默认展开所有节点
          props: 可选  指定label或children在真正数据的字段名
         -->
        <!-- 部门名称 -->
        <el-tree
          :data="depts"
          default-expand-all
          :props="{label:'name'}"
          :expand-on-click-node="false"
        >
          <!-- 作用域插槽: 由于我们传入一个数组, 遍历都在子组件内部进行, 每个遍历的数据对象, 需要由elementUI子组件回传过来 -->
          <!-- data:  就是内部回传回来的数据对象 -->
          <!--
            之前的作用域插槽是这样用的
            <slot name="header"></slot>
            使用: <template v-slot:header="XXXXX"></template> ===> 可以简写为 <template #header="XXXXX"></template>

            vue官方文档写过, 如果作用域插槽没有用name的话, 那么就需要加上default来代表name, 比如#default
            但是, 这次我们用的是element封装的作用域插槽, 它的官方文档中, name就是空的,  所以我们要用#default
           -->
          <template #default="{data}">
            <!-- 别的写法:  <template v-slot:default="{data}"> -->
            <treeTools
              :node-data="data"
              @showAddDialog="showAddDialog"
              @showUpdateDialog="showUpdateDialog"
              @updateData="getDepartmentList"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 新增部门弹窗 -->
      <addDepts
        ref="addDepartment"
        :is-show-dialog.sync="isShowAddDialog"
        :node-data="nodeData"
        @addDepartment="getDepartmentList"
      />
      <!-- @closeDialog="isShowAddDialog=false" -->
    </div>

  </div>
</template>

<script>
// 引入部门组件
import treeTools from './components/treeTools.vue'
import addDepts from './components/addDepts.vue'
// 引入部门接口
import { getDepartmentList } from '@/api/department'
// 引入将扁平化数据转成tree数据的函数
import { listToTreeData } from '@/utils/index'
export default {
  components: {
    treeTools,
    addDepts
  },
  data() {
    return {
      // 公司信息
      companyInfo: {
        name: '黑马程序员',
        manager: '负责人',
        id: ''
      },
      // 部门信息
      depts: [],
      isShowAddDialog: false,
      nodeData: {} // 接收点击新增按钮传递过来的数据
    }
  },
  async created() {
    this.getDepartmentList()
  },
  methods: {
    // 显示新增弹窗
    showAddDialog(nodeData) {
      console.log(222222222)
      this.isShowAddDialog = true
      this.nodeData = nodeData
      // console.log(84, nodeData)
    },
    // 显示编辑弹窗
    showUpdateDialog(nodeData) {
      // 通过$refs调用子组件中的函数,  并且将id传递过去,  方便用于调用获取部门详情
      this.$refs.addDepartment.showDepartmentData(nodeData.id)
      // 显示弹窗
      this.isShowAddDialog = true
      this.nodeData = nodeData
    },
    // 获取部门列表
    async getDepartmentList() {
      // 调用获取部门列表接口
      const { depts } = await getDepartmentList()
      console.log('部门列表:', depts)
      // this.depts = depts
      // 将扁平数据转成element识别的嵌套children的tree数据
      this.depts = listToTreeData(depts, '')
    }

  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
